<template>
	<view>
		<view>
			<view>
				<u--textarea maxlength="1000" height="140" v-model="value" placeholder="请输入内容" count></u--textarea>
			</view>
			<view class="addbox1_son2">
				<view class="pic-box">
					<view class="pic-box-son" v-for="(picitem,picindex) in picArr" :key="picindex">
						<!-- 删除按钮 -->
						<view class="delbtn" @tap="delpic(picindex)"></view>
						<image :src="picitem"></image>
					</view>
					<view v-show="picArr.length<5" class="pic-box-son" @tap="sendImg">
						<view>点击<br>上传图片</view>
						<view>（最多5张）</view>
					</view>
				</view>
			</view>
		</view>
		<view class="other">
			<view class="other_addres" @click="openAddressPicker">
				<view>选择地址</view>
				<view>{{address}}</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view style="padding:50rpx;">
			<u-button plain="true" type="primary" shape="circle" text="选择话题" @click="chooseTag"></u-button>
			<view v-if="tagName != ''" style="position: absolute; padding-top: 20rpx;">
				<u-tag :text="tagName" type="warning" icon="tags"></u-tag>
			</view>
		</view>
		<view style="padding-top: 50rpx;">
			<u-button v-if="value && picArr != [] && tagId != '' && address != ''" @click="addPost" text="发帖"
				color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
			<u-button v-if="!(value && picArr != [] && tagId != '' && address != '')" disabled="true" @click="addPost"
				text="发帖" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				picture:[],
				value: '',
				picArr: [],
				tagId: '',
				tagName: '',
				address: '',
				userId:'',
			}
		},
		onShow() {
			let that = this;
			that.tagId = uni.getStorageSync("tagId");
			that.tagName = uni.getStorageSync("tagName");
		},
		onLoad(query) {
			let that = this;
			uni.removeStorageSync("tagId");
			uni.removeStorageSync("tagName");
			that.userId = uni.getStorageSync("userId");
		},
		methods: {
			addPost() {
				let that = this;
				let data = {
					picture: that.picture.join(","),
					postContent: that.value,
					postAddress: that.address,
					tagList: that.tagId
				}
				that.$ajax(that.$url.addPost, "POST", data, function(resp) {
					uni.showToast({
						icon: 'none',
						title: '发帖成功！'
					})
				})
				that.value = '';
				that.tagId = '';
				that.address = '';
				that.picArr = [];
				uni.reLaunch({
					url: '/pages/discussion/discussion'
				})
			},
			openAddressPicker() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						that.address = res.name;
					}
				});
			},
			chooseTag() {
				uni.navigateTo({
					url: '/pages/tag/tag'
				})
			},
			// 上传图片
			sendImg: function() {
				let that = this;
				let num = 5 - this.picArr.length;
				let count = num; // 自定义一次性最多可选几张
				uni.chooseImage({
					count: count, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						const filePaths = res.tempFilePaths;
						let selected = this.picArr
						for (let i = 0; i < filePaths.length; i++) {
							that.picture[i] = "http://s1qq2mel1.hn-bkt.clouddn.com/images/" + that.userId +
								"/shopComment/" + filePaths[i];
							that.$ajax(that.$url.upLoad, "GET", null, function(resp) {
								let token = resp.data.result;
								let now = new Date();
								console.log("filePaths", filePaths[i])
								that.imgUrl = 'images/' + that.userId + "/shopComment/" +
									filePaths[i]; // 图片链接，其中的 / 会自动生成一个名为images的文件夹， // 则是两个
								let self = this
								wx.uploadFile({
									filePath: filePaths[i], // ctx.takePhoto拍照获取的图片链接
									url: "https://upload-z2.qiniup.com", // 七牛云地址
									name: "file",
									formData: {
										token,
										key: that.imgUrl,
										insertOnly: 0,
									},
									success: (a) => {
										console.log(a)
										console.log("上传成功！")
										let res = a.data
										res = JSON.parse(res)
										if (res.code == '1') {
											const {
												data
											} = res
											self.avatar = data.url
											self.cdnUrl = getApp().globalData.cdnUrl +
												data.url
										}

										wx.hideLoading()
										wx.showToast({
											title: '上传成功',
											icon: 'success',
											duration: 3000
										})
									},
									fail: (res) => {
										console.log(res)
										return 0;
									},
								})

							})

							this.picArr.unshift(filePaths[i])
						}
					}
				});
			},
			// 删除当前图片
			delpic: function(index) {
				// console.log(index)
				this.picArr.splice(index, 1)
			},
		}
	}
</script>

<style lang="scss">
	.addbox1_son2 {
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
		/* flex-direction: row; */
		/* align-items: center; */
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, .1);
	}

	.pic-box {
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		/* justify-content: center; */
	}

	.pic-box-son {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
		width: 152rpx;
		height: 152rpx;
		padding: 4rpx;
		border-radius: 6rpx;
		border: 2rpx dashed rgba(0, 0, 0, .2);
	}

	.pic-box-son image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}

	.pic-box-son>view:first-child {
		font-size: 28rpx;
		color: #565656;
		text-align: center;
	}

	.pic-box-son>view:last-child {
		font-size: 24rpx;
		color: #a7a7a7;
		text-align: center;
	}

	.delbtn {
		width: 100%;
		position: relative;
		text-align: center;
		line-height: 32rpx;
		font-size: 46rpx;
	}

	.delbtn::before {
		position: absolute;
		content: '-';
		background-color: #ff9000;
		color: #fff;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50rpx;
		top: 6rpx;
		right: 6rpx;
		z-index: 99;
	}

	.other {
		margin: 10rpx;
		height: 110rpx;
		// width: 90%;
		border-radius: 20rpx;
		background-color: #fff;

		.other_addres {
			height: 60rpx;
			padding: 20rpx 20rpx;
			border-bottom: 1rpx dashed gainsboro;
			display: flex;
			justify-content: space-between;

			image {
				width: 50rpx;
			}
		}
	}
</style>